<!--canvas 基础-->
<template>
    <div class="content" ref="canvasRef">
        <canvas class="main" ref="mainRef"></canvas>
        <div style="display: none">
            <img ref="imgRef" src="../../../assets/img/bg.jpg">
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted } from "vue";
    import foundation from './index'

    const canvasRef = ref();
    // 获取canvas元素
    const mainRef = ref();
    const canvas = ref();
    const ctx = ref();

    //
    const imgRef = ref();

    // 初始化canvas
    const initCanvas = () => {
        // 确保获取到了canvas元素
        if (!mainRef.value) return console.error("无法获取Canvas元素");
        // 获取页面高宽
        const width = canvasRef.value.offsetWidth;
        const height = canvasRef.value.offsetHeight;
        canvas.value = mainRef.value;
        // 设置canvas的宽高
        canvas.value.width = width;
        canvas.value.height = height;
        // 获取Canvas绘制2D环境
        ctx.value = canvas.value.getContext("2d");
        if (!ctx.value) return console.error("无法获取CanvasRenderingContext2D");

        // 绘制圆形
        foundation.drawCircle(ctx.value,{dx:400,dy:100,radius:80,color:'#ff291f'});
        // 引入图片
        foundation.drawImg(ctx.value,{img:imgRef.value,dx:20,dy:20,dWidth:200,dHeight:200,});
        // 文字
        foundation.drawTxt(ctx.value,{font:'24px STheiti, SimHei',txt:"canvas基础文本绘制",dx:600,dy:100,maxWidth:200});
        //箭头
        foundation.drawArrow(ctx.value,{fromX:850,fromY:100,toX:950,toY:100});
        //线条
        foundation.drawLine(ctx.value,{fromX:1000,fromY:100,toX:1200,toY:100});
        foundation.drawArrow(ctx.value,{fromX:1100,fromY:100,toX:1100,toY:200});

        //清除某个区域
        ctx.value.clearRect(20,20,300,500);

        // 绘制矩形
        foundation.drawRectangle(ctx.value,{dx:1250,dy:50,width:100,height:100})



    };




    // 页面挂载后才能绘制
    onMounted(() => {
        initCanvas();
    });

</script>

<style scoped>
    .content{
        width: 100%;
        height: 100%;
    }
</style>